<template>
  <div class="wrap">
    <div class="title">
      <img src="../../images/main/money.png" alt> 财务管理
    </div>
    <div class="content">
      <!-- <ul>
        <li :class="change == 0 ? 'first active' : 'first'" @click="setChanges(0)">财务管理</li>
        <li :class="change == 1 ? ' active' : ''" @click="setChanges(1)">合伙人</li>
        <li :class="change == 2 ? ' active' : ''" @click="setChanges(2)">服务商</li>
      </ul> -->
      <!-- 财务管理 -->
      <fin-man></fin-man>
      <!-- 合伙人 -->
      <!-- <fin-par v-if="change == 1"></fin-par> -->
      <!-- 服务商 -->
      <!-- <fin-server v-if="change == 2"></fin-server> -->
    </div>
  </div>
</template>
<script>
import finMan from './finMan.vue'
import finPar from './finParMan.vue'
import finServer from './finServer.vue'
export default {
    components:{
        finPar,
        finMan,
        finServer
    },
    data () {
      return {
        change:0
      }
    },
    methods: {
      setChanges: function (num) {
          let that = this
          that.change = num
      }
    }

};
</script>
<style scoped>
.wrap {
  /* padding-top: 70px;
  padding-left: 129px; */
  width: 90%;
  margin: 40px auto;
}
.title {
  height: 33px;
  line-height: 33px;
  font-size: 24px;
  font-family: PingFangSC-Medium;
  font-weight: bold;
  padding-left: 7px;
}
.title img {
  width: 28px;
  height: 26px;
  float: left;
  padding-top: 5px;
  margin-right: 10px;
}
.content ul {
  float: left;
  background: #f6f6f6;
  width: 148px;
  height: 230px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #000000;
  margin-top: 90px;
}
.content ul li.first {
  margin-top: 31px;
}
.content ul li.active {
  background: #4B74FF;
  color: #fff;
}
.content ul li {
  margin: 35px 0px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
  font-weight: bold;
}
</style>
